<template>
  <div class="goodsListBox">
    <div class="goodsList" v-if="goods.length">
      <div class="inner">
        <router-link :to="{ name: 'goodsinfo', params: { id: item.id }}" class="goods-item" v-for="(item, index) in goods" :key="index">
          <a href="javascript:;">
            <div class="goods_img" v-if="item.pics">
              <img v-lazy="item.pics[0]" alt="">
            </div>
            <span class="goods_title">{{ item.title }}</span>
            <p class="goods_price">
              ￥&nbsp<span class="big_price">{{ item.price }}</span>
            </p>
          </a>
        </router-link>
      </div>
    </div>
    <div class="search_none" v-else="!goods.length">
      很抱歉!无搜索结果
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      goods: {type: Array }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  .goodsListBox
    width: 100%
    border-box()
    .goodsList
      border-box()
      padding 0 8px 0
      bg(#f6f6f6)
      .inner
        width 100%
        clearFix()
        .goods-item
          width 50%
          fl()
          border-box()
          padding-right 4px
          padding-bottom 4px
          overflo hidden
          a
            size(100%, 100%)
            bg(#fff)
            .goods_img
              size(174px, 174px)
              overflow hidden
              img
                size(100%, 100%)
            .goods_title
              color(#232326)
              border-box()
              fz(13px)
              lh(16px)
              display block
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-line-clamp 2
              -webkit-box-orient vertical
              padding 0 4px
              margin-top 4px
            .goods_price
              fz(14px)
              color(#f23030)
              border-box()
              padding 6px 0 16px
              .big_price
                fz(17px)
    .search_none
      margin 0 auto
      color(#333)
      bg(#fff)
      center-text()
      lh(26px)
      margin-top 0.125rem
</style>
